<template>
    <div class="common-tab-content">
        <div class="query-table-page">
            <div class="query-box">
                <el-form :inline="true" :model="formObj" class="common-query-form">
                    <el-form-item label="类别">
                        <el-select
                                v-model="formObj.region"
                                placeholder="请选择类别"
                                clearable
                        >
                            <el-option v-for="item in lbList" :label="item.name" :value="item.code" :key="item.code"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="栏目">
                        <el-cascader :options="lmList" v-model="formObj.type" :props="{label: 'name', value: 'code'}" clearable />
                    </el-form-item>
                    <el-form-item label="标题关键字">
                        <el-input v-model="formObj.user" placeholder="请输入标题关键字" clearable/>
                    </el-form-item>
                    <el-form-item label="开始日期">
                        <el-date-picker
                                v-model="formObj.date"
                                type="date"
                                placeholder="请选择开始日期"
                                clearable
                        />
                    </el-form-item>
                    <el-form-item label="结束日期">
                        <el-date-picker
                                v-model="formObj.date"
                                type="date"
                                placeholder="请选择结束日期"
                                clearable
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" type="primary" @click="queryFn">查询</el-button>
                        <el-button :loading="loading" type="primary" @click="initFn">重置</el-button>
                        <el-button type="primary" @click="addFn">新增文章</el-button>
                        <el-dropdown @command="batchOperate">
                            <el-button style="margin-left: 12px" type="primary">批量操作</el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="a">删除</el-dropdown-item>
                                    <el-dropdown-item command="b">置顶</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </el-form-item>
                </el-form>
            </div>
            <div class="table-box">
                <div class="table-list">
                    <el-table :key="tbKey" ref="commonTable" :data="tableData" border stripe style="width: 100%" height="620px">
                        <el-table-column type="selection" label="全选" width="50"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="title" label="标题"/>
                        <el-table-column prop="clickNumber" label="点击量" width="100px"/>
                        <el-table-column prop="itemName" label="所属栏目" width="100px"/>
                        <el-table-column prop="index" label="排序号" width="80px"/>
                        <el-table-column prop="uploadTime" label="上传时间" width="180px"/>
                        <el-table-column prop="id" label="操作" width="170px">
                            <template #default="scope">
                                <span @click="previewFn" class="common-table-btn">预览</span>
                                <span @click="editFn" class="common-table-btn">修改</span>
                                <span @click="deleteFn(scope) " class="common-table-btn">删除</span>
                                <span @click="topFn" class="common-table-btn">置顶</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="paging-box">
                    <el-pagination
                            v-model:current-page="currentPage"
                            v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 50, 100]"
                            :size="size"
                            :background="background"
                            layout="total, prev, pager, next, sizes, jumper"
                            :total="124"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
        <el-dialog v-model="visible" width="500">
            <template #header>
                <div class="common-title">
                    <h4 class="title-class">
                        <el-icon class="el-icon--left">
                            <Edit/>
                        </el-icon>
                        <span>新增文章</span>
                    </h4>
                </div>
            </template>
            <div class="common-dialog-wrap">
                <el-form ref="commonForm" :model="addObj" class="common-form" label-position="top">
                    <el-form-item label="类别">
                        <el-select
                                v-model="addObj.lb"
                                @change="changeLb"
                                placeholder="请选择类别"
                                clearable
                        >
                            <el-option v-for="item in lbList" :label="item.name" :value="item.code" :key="item.code"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="子类别">
                        <el-select
                                v-model="addObj.zlb"
                                placeholder="请选择子类别"
                                clearable
                        >
                            <el-option v-for="item in zlbList" :label="item.name" :value="item.code" :key="item.code"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="栏目">
                        <el-cascader :options="lmList" v-model="formObj.type" :props="{label: 'name', value: 'code'}" clearable />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeAdd">取消</el-button>
                    <el-button type="primary" @click="enterAdd">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import {reactive, ref, onMounted} from "vue"
import {Edit} from '@element-plus/icons-vue'
import {lmList} from "@/utils/dict"
import router from "@/router";
import {$confirm, $msg} from "@/utils";
const formObj = reactive({
    user: '',
    region: '',
    type: '',
    date: ''
})
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const size = ref('default')
const background = ref(false)
const loading = ref(false)
const visible = ref(false)
const addObj = reactive({
    lb: '',
    zlb: '',
    lm: ''
})
const lbList = ref([
    {
        code: 'code1',
        name: '普通高校招生',
        children: [
            {
                code: 'code1-1',
                name: '本科招生'
            },
            {
                code: 'code1-2',
                name: '专科招生'
            },
            {
                code: 'code1-3',
                name: '艺术体育'
            },
            {
                code: 'code1-4',
                name: '技能高考'
            },
            {
                code: 'code1-5',
                name: '可视化'
            },
            {
                code: 'code1-6',
                name: '军队院校招生'
            },
            {
                code: 'code1-7',
                name: '港澳台招生'
            },
            {
                code: 'code1-8',
                name: '高职单招'
            },
            {
                code: 'code1-9',
                name: '特殊类型招生'
            }
        ]
    },
    {
        code: 'code2',
        name: '探究生招生',
        children: [
            {
                code: 'code2-1',
                name: '政策规定'
            }
        ]
    },
    {
        code: 'code3',
        name: '成人高校招生',
        children: [
            {
                code: 'code3-1',
                name: '政策规定'
            },
            {
                code: 'code3-2',
                name: '公告快讯'
            }
        ]
    },
    {
        code: 'code4',
        name: '高中阶段招生',
        children: [
            {
                code: 'code4-1',
                name: '政策规定'
            }
        ]
    }
])
const zlbList = ref([])
const rules = ref({
    lb: [
        {required: true, message: '请选择类别', trigger: 'change'}
    ],
    zlb: [
        {required: true, message: '请选择子类别', trigger: 'change'}
    ],
    lm: [
        {required: true, message: '请选择栏目', trigger: 'change'}
    ],
})
function changeLb(e){
    if(e){
        zlbList.value = lbList.value.find(item => item.code === e).children
    }else {
        zlbList.value = []
    }
}
const commonForm = ref(null)
const commonTable = ref(null)
const tbKey = ref(0)
function queryFn() {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const addFn = () => {
    visible.value = true
}
const initFn = () => {
    loading.value = true
    formObj.value = {
        user: '',
        region: '',
        type: '',
        date: ''
    }
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const closeAdd = () => {
    visible.value = false
}
const enterAdd = async () => {
    await commonForm.value.validate((valid, fields) => {
        if (valid) {
            visible.value = false
            router.push({
                path: '/addContent',
                query: {
                    name: '新增文章'
                }
            })
        } else {
            $msg({
                type: 'warning',
                message: '请检查表单内容',
            })
        }
    })
}
const previewFn = () => {
    window.open('http://193.112.98.218:18081/hubei/#/MsgDetails?menuIndex=2', '_blank')
}
const editFn = () => {
    router.push({
        path: '/addContent',
        query: {
            name: '修改文章'
        }
    })
}
const deleteFn = (obj) => {
    $confirm({
        title: '是否删除该数据?',
        type: 'delete'
    }).then(() => {
        $msg({
            type: 'success',
            message: '删除成功',
        })
    })
}
const topFn = (obj) => {
    $confirm({
        title: '是否置顶该数据?'
    }).then(() => {
        $msg({
            type: 'success',
            message: '置顶成功',
        })
    })
}
const batchOperate = (e)=>{
    const selectedRows = commonTable.value.getSelectionRows()
    if (!selectedRows || selectedRows.length === 0) {
        $msg({
            type: 'warning',
            message: '请至少选择一条数据',
        })
        return
    }
    switch(e) {
        case 'a':
            $confirm({
                title: `确定要删除选中的${selectedRows.length}条数据吗?`,
                type: 'delete'
            }).then(() => {
                $msg({
                    type: 'success',
                    message: '删除成功',
                })
                tbKey.value += 1
            })
            break
        case 'b':
            $confirm({
                title: `确定要置顶选中的${selectedRows.length}条数据吗?`
            }).then(() => {
                $msg({
                    type: 'success',
                    message: '置顶成功',
                })
                tbKey.value += 1
            })
            break
    }
}
onMounted(() => {
    for (let i = 0; i < 20; i++) {
        tableData.value.push({
            title: '[置顶][图]湖北省2025年高职高专普通批第二次征集志愿投档分数线(含历史向和物理向）[普通高校招生]',
            clickNumber: '1000',
            itemName: '要闻公告',
            index: i + 1,
            uploadTime: '2021-01-01 12:09:45'
        })
    }
})
</script>
<style scoped lang="less">

</style>
